<template>
  <a-modal :open="open" width="1100px" :footer="false" title="执行明细" centered @cancel="onCancel">
    <div class="mb-5">
      <span>日期范围：{{ time }}</span>
    </div>
    <!-- <a-divider class="my-3" /> -->
    <BaseTable :loading="loading" column-code="000045" :data-source="tableData" bordered :pagination="pagination" :height="470">
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'xh'">
          <div>{{ index + 1 }}</div>
        </template>
        <template v-if="column.dataIndex === 'cfdh'">
          <template v-if="record.cfdh">
            <a-popover placement="bottomLeft" :trigger="triggerMode" :auto-adjust-overflow="false" @open-change="(open) => open && getDataDetail(record.cfdh)">
              <template #content>
                <div class="p-1.5">
                  <a-descriptions class="descriptions" size="middle" :column="3" bordered>
                    <a-descriptions-item v-for="item in dataSource" :key="item" :label="item.jf ? item.mc + '(' + item.jf + ')' : item.mc">{{
                      item.sl + item.dw
                    }}</a-descriptions-item>
                  </a-descriptions>
                  <div class="my-3 mx-3">{{ takeDetail }}</div>
                </div>
              </template>
              <span ref="textRef" class="cursor-pointer text-primary hover:underline">{{ record.cfdh }}</span>
            </a-popover>
          </template>
          <template v-else>
            <PopoverTable :config="detailConfig" :params="{ cfbh: record.cfbh }" :width="1100">
              <template #bodyCell="{ column: popColumn, record: popRecord }">
                <template v-if="popColumn.dataIndex === 'mc'">
                  <MedicineInfo :value="{ mc: popRecord?.mc, gg: popRecord?.gg, cj: popRecord?.cj }" />
                </template>
                <template v-if="popColumn.dataIndex === 'zxzt'">
                  <a-tag v-if="popRecord.zxzt === '0'" color="green">已缴费</a-tag>
                  <a-tag v-if="popRecord.zxzt === '1'" color="green">已执行</a-tag>
                </template>
              </template>
              {{ record.cfbh }}
            </PopoverTable>
          </template>
        </template>
        <template v-if="column.dataIndex === 'brName'"> </template>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { watch, ref } from 'vue'
import { message } from 'ant-design-vue'
import BaseTable from '@/components/BaseTable'
import { post } from '@/utils/request'
import useUserStore from '@/store/user'

const { empId } = useUserStore()
const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  },
  dateRange: {
    type: String,
    default: () => ''
  }
})

const time = ref('')
const dataSource = ref([])
const takeDetail = ref('')
const detailConfig = ref({
  url: '/outp/outpComprehensive/getWesternPrescriptionStatisticsDetailsList',
  columnCode: '000046',
  rowKey: 'cfbh',
  formatResult: (data) => {
    return data.map((item, index) => ({
      ...item,
      NO: index + 1
    }))
  }
})
const { loading, pagination, getData, tableData } = useTable({
  url: '/outp/outpComprehensive/getPrescriptionStatisticsList',
  params: props.rowData,
  formatParams: () => {
    return {
      stdate: props.dateRange?.[0],
      eddate: props.dateRange?.[1],
      ysbh: empId,
      xmlbs: props.rowData.status === 1 ? [2, 4] : [5]
    }
  }
})

const getDataDetail = async (cfdh) => {
  const { code, data, msg } = await post('/outp/outpComprehensive/getMedicinalHerbPrescriptionStatisticsDetailsList', { cfdh })
  if (code !== 0) return message.error(msg)
  dataSource.value = data
  takeDetail.value =
    handleEmpty(data[0].zycfzb.fssl) +
    '付' +
    ' ' +
    handleEmpty(data[0].zycfzb.yf) +
    ' ' +
    handleEmpty(data[0].zycfzb.pl) +
    ' ' +
    handleEmpty(data[0].zycfzb.jcl) +
    ' ' +
    handleEmpty(data[0].zycfzb.cmemo)
}

const handleEmpty = (val) => {
  if (val === undefined) {
    return ''
  } else {
    return val
  }
}

const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      time.value = props.dateRange?.[0] + '至' + props.dateRange?.[0]
      getData()
    }
  }
)
</script>

<style lang="less" scoped>
.button-active {
  line-height: 30px;
  border: 1px solid var(--primary-color);
}
.active {
  color: #fff;
  background-color: var(--primary-color);
}
.bottom-item {
  display: block;
}
</style>
